<script setup>
import { ref, onMounted } from "vue";
import { getImageUrl } from "@/utils/format";
import {
  Location,
  Timer,
  Promotion,
  Tickets,
  Van,
  Ship,
  Box,
  Star,
  Sunny,
  Umbrella,
  Compass,
  Picture,
  Camera,
  InfoFilled,
  Clock,
} from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import router from "@/router";
import { getDestinationDetail, incrementDestinationVisits, getRelatedRoutes } from "@/api/destination";

// 状态变量
const destination = ref({});
const relatedRoutes = ref([]);
const route = useRoute();
const loading = ref(false);
const activeSection = ref("overview");

// 获取目的地详情
const getDetail = async () => {
  const id = route.params.id;
  if (!id) return;

  loading.value = true;
  try {
    const res = await getDestinationDetail(id);
    destination.value = res;
    
    // 增加访问量
    incrementDestinationVisits(id).catch(err => {
      console.error("增加访问量失败:", err);
    });
    
    // 处理图片URL
    if (destination.value.coverImages && !Array.isArray(destination.value.coverImages)) {
      destination.value.coverImages = destination.value.coverImages.split(',');
    }
    
    if (destination.value.gallery && !Array.isArray(destination.value.gallery)) {
      destination.value.gallery = destination.value.gallery.split(',');
    }
    
    // 确保highlights是数组
    if (!destination.value.highlights) {
      destination.value.highlights = [];
    } else if (typeof destination.value.highlights === 'string') {
      try {
        destination.value.highlights = JSON.parse(destination.value.highlights);
      } catch (e) {
        destination.value.highlights = [];
        console.error("解析highlights失败:", e);
      }
    }
    
    // 确保activities是数组
    if (!destination.value.activities) {
      destination.value.activities = [];
    } else if (typeof destination.value.activities === 'string') {
      try {
        destination.value.activities = JSON.parse(destination.value.activities);
      } catch (e) {
        destination.value.activities = [];
        console.error("解析activities失败:", e);
      }
    }
    
    // 确保photographySpots是数组
    if (!destination.value.photographySpots) {
      destination.value.photographySpots = [];
    } else if (typeof destination.value.photographySpots === 'string') {
      try {
        destination.value.photographySpots = JSON.parse(destination.value.photographySpots);
      } catch (e) {
        destination.value.photographySpots = [];
        console.error("解析photographySpots失败:", e);
      }
    }
    
    // 确保transportationInfo存在
    if (!destination.value.transportationInfo) {
      destination.value.transportationInfo = {};
    } else if (typeof destination.value.transportationInfo === 'string') {
      try {
        destination.value.transportationInfo = JSON.parse(destination.value.transportationInfo);
      } catch (e) {
        destination.value.transportationInfo = {};
        console.error("解析transportationInfo失败:", e);
      }
    }
    
    // 确保badges是数组
    if (!destination.value.badges) {
      destination.value.badges = [];
    } else if (typeof destination.value.badges === 'string') {
      destination.value.badges = destination.value.badges.split(',');
    }
    
    // 确保restaurants是数组
    if (!destination.value.restaurants) {
      destination.value.restaurants = [];
    } else if (typeof destination.value.restaurants === 'string') {
      try {
        destination.value.restaurants = JSON.parse(destination.value.restaurants);
      } catch (e) {
        destination.value.restaurants = [];
        console.error("解析restaurants失败:", e);
      }
    }
    
    // 确保accommodations是数组
    if (!destination.value.accommodations) {
      destination.value.accommodations = [];
    } else if (typeof destination.value.accommodations === 'string') {
      try {
        destination.value.accommodations = JSON.parse(destination.value.accommodations);
      } catch (e) {
        destination.value.accommodations = [];
        console.error("解析accommodations失败:", e);
      }
    }
    
    // 获取相关路线
    fetchRelatedRoutes(id);
    
  } catch (error) {
    console.error("获取目的地详情失败:", error);
    ElMessage.error("获取目的地详情失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};

// 获取相关路线
const fetchRelatedRoutes = async (destinationId) => {
  try {
    // 使用 destination.js 中的方法替代 route.js 中的方法
    const res = await getRelatedRoutes(destinationId);
    if (res && Array.isArray(res)) {
      relatedRoutes.value = res;
    } else if (res && res.data && res.data.code === 200) {
      relatedRoutes.value = res.data.data || [];
    } else {
      relatedRoutes.value = [];
    }
  } catch (error) {
    console.error("获取相关路线失败:", error);
    relatedRoutes.value = [];
  }
};

// 添加标签样式函数
const getTagStyle = (badge) => {
  const styles = {
    摄影天堂: { bg: "#e6fffb", text: "#13c2c2" },
    世界遗产: { bg: "#fff0f6", text: "#eb2f96" },
    自然奇观: { bg: "#f6ffed", text: "#52c41a" },
    历史古迹: { bg: "#fff7e6", text: "#fa8c16" },
    户外探险: { bg: "#f0f5ff", text: "#2f54eb" },
    民族风情: { bg: "#fff1f0", text: "#f5222d" },
    美食之旅: { bg: "#fffbe6", text: "#faad14" },
    休闲度假: { bg: "#fcffe6", text: "#a0d911" }
  };
  return styles[badge] || { bg: "#f5f5f5", text: "#666666" };
};

// 处理滚动监听
const handleIntersection = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      activeSection.value = entry.target.id;
    }
  });
};

// 创建自定义指令
const vIntersection = {
  mounted: (el, binding) => {
    const observer = new IntersectionObserver(binding.value, {
      threshold: 0.5,
    });
    observer.observe(el);
  },
};

// 优化天气图标获取函数
const getWeatherIcon = (weather) => {
  const icons = {
    晴: "Sunny",
    多云: "Cloudy",
    阴: "Cloudy",
    小雨: "MostlyCloudy",
    中雨: "MostlyCloudy",
    大雨: "Lightning",
    雷雨: "Lightning",
    雪: "MostlyCloudy",
    雾: "Cloudy"
  };
  return icons[weather] || "Cloudy";
};

// 添加路线跳转方法
const viewRoute = (id) => {
  router.push(`/route/${id}`);
};



// 页面加载时获取数据
onMounted(() => {
  getDetail();
});

// 暴露方法供父组件调用
defineExpose({
  getDetail
});

</script>

<template>
  <div class="destination-detail" v-loading="loading">
    <!-- 封面区域优化 -->

    <div class="hero-section">
      <div class="breadcrumb-nav">
        <div class="container">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/destinations' }"
              >目的地</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ destination.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div
        class="cover-image"
        :style="{ backgroundImage: `url(${destination.coverImages?.[0]})` }"
      >
        <div class="cover-overlay">
          <div class="container">
            <!-- 修改面包屑容器 -->
            <div class="hero-content">
              <div class="destination-info">
                <div class="badges">
                  <el-tag
                    v-for="badge in destination.badges"
                    :key="badge"
                    :style="getTagStyle(badge)"
                    class="feature-badge"
                  >
                    {{ badge }}
                  </el-tag>
                </div>
                <h1>{{ destination.name }}</h1>
                <p class="subtitle">{{ destination.subtitle }}</p>
                <div class="basic-stats">
                  <div class="stat-item">
                    <el-icon><Location /></el-icon>
                    <span>{{ destination.altitude }}</span>
                  </div>
                  <div class="stat-divider"></div>
                  <div class="stat-item">
                    <el-icon><Sunny /></el-icon>
                    <span>{{ destination.bestTimeToVisit }}</span>
                  </div>
                  <div class="stat-divider"></div>
                  <div class="stat-item">
                    <el-icon><Star /></el-icon>
                    <span>{{ destination.rating }}分</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <div class="container">
        <el-row :gutter="30">
          <!-- 左侧内容区 -->
          <el-col :lg="16" :md="24">
            <!-- 景点概览优化 -->
            <section
              id="overview"
              class="content-card overview-section"
              v-intersection="handleIntersection"
            >
              <div class="card-header">
                <h2>景点概览</h2>
              </div>
              <div class="card-body">
                <div
                  class="overview-text"
                  v-html="destination.description"
                ></div>
                <div class="image-gallery">
                  <el-image
                    v-for="(img, index) in destination.gallery"
                    :key="index"
                    :src="getImageUrl(img)"
                    :preview-src-list="
                      destination.gallery.map((url) => getImageUrl(url))
                    "
                    :initial-index="index"
                    fit="cover"
                    class="gallery-image"
                    preview-teleported
                  >
                    <template #placeholder>
                      <div class="image-placeholder">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </div>
            </section>

            <!-- 景点亮点优化 -->
            <section
              id="highlights"
              class="content-card highlights-section"
              v-intersection="handleIntersection"
            >
              <div class="card-header">
                <h2>景区亮点</h2>
              </div>
              <div class="card-body">
                <div class="highlights-grid">
                  <div
                    v-for="highlight in destination.highlights"
                    :key="highlight.title"
                    class="highlight-card"
                  >
                    <div class="highlight-image">
                      <el-image :src="highlight.image" fit="cover" />
                    </div>
                    <div class="highlight-content">
                      <h3>{{ highlight.title }}</h3>
                      <p>{{ highlight.description }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 特色体验 -->
            <section class="content-card experience-section">
              <div class="card-header">
                <h2>特色体验</h2>
              </div>
              <div class="card-body">
                <el-row :gutter="20">
                  <el-col
                    :md="8"
                    v-for="activity in destination.activities"
                    :key="activity.name"
                  >
                    <div class="activity-card">
                      <div class="activity-header">
                        <h3>{{ activity.name }}</h3>
                        <el-tag
                          size="small"
                          :type="
                            activity.difficulty === '简单'
                              ? 'success'
                              : 'warning'
                          "
                        >
                          {{ activity.difficulty }}
                        </el-tag>
                      </div>
                      <div class="activity-info">
                        <div class="info-item">
                          <el-icon><Clock /></el-icon>
                          <span>{{ activity.duration }}</span>
                        </div>
                        <div class="info-item">
                          <el-icon><Sunny /></el-icon>
                          <span>{{ activity.bestTime }}</span>
                        </div>
                      </div>
                      <p class="activity-desc">{{ activity.description }}</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </section>

            <!-- 摄影攻略 -->
            <section class="content-card photography-section">
              <div class="card-header">
                <h2>摄影攻略</h2>
              </div>
              <div class="card-body">
                <div class="photo-spots">
                  <div
                    v-for="spot in destination.photographySpots"
                    :key="spot.name"
                    class="photo-spot-card"
                  >
                    <div class="spot-header">
                      <el-icon><Camera /></el-icon>
                      <h3>{{ spot.name }}</h3>
                    </div>
                    <div class="spot-info">
                      <div class="info-row">
                        <el-icon><Clock /></el-icon>
                        <span>最佳时段: {{ spot.bestTime }}</span>
                      </div>
                      <div class="info-row">
                        <el-icon><Picture /></el-icon>
                        <span>拍摄类型: {{ spot.type }}</span>
                      </div>
                      <div class="spot-tips">
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ spot.tips }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 交通攻略 -->
            <section class="content-card transport-section">
              <div class="card-header">
                <h2>交通攻略</h2>
              </div>
              <div class="card-body">
                <div class="transport-options">
                  <!-- 自驾路线 -->
                  <div class="transport-card car">
                    <div class="transport-icon">
                      <el-icon><Van /></el-icon>
                    </div>
                    <h3>自驾路线</h3>
                    <p>
                      {{
                        destination.transportationInfo?.car ||
                        "暂无自驾路线信息"
                      }}
                    </p>
                    <div class="transport-tips">
                      <div class="tip-item">
                        <el-icon><Timer /></el-icon>
                        <span>建议2天到达</span>
                      </div>
                      <div class="tip-item">
                        <el-icon><Location /></el-icon>
                        <span>全程约680公里</span>
                      </div>
                    </div>
                  </div>

                  <!-- 飞机到达 -->
                  <div class="transport-card plane">
                    <div class="transport-icon">
                      <el-icon><Ship /></el-icon>
                    </div>
                    <h3>飞机到达</h3>
                    <p>
                      {{
                        destination.transportationInfo?.plane || "暂无航班信息"
                      }}
                    </p>
                    <div class="transport-tips">
                      <div class="tip-item">
                        <el-icon><Timer /></el-icon>
                        <span>约1小时航程</span>
                      </div>
                      <div class="tip-item">
                        <el-icon><Promotion /></el-icon>
                        <span>每日多个航班</span>
                      </div>
                    </div>
                  </div>

                  <!-- 大巴到达 -->
                  <div class="transport-card bus">
                    <div class="transport-icon">
                      <el-icon><Box /></el-icon>
                    </div>
                    <h3>大巴到达</h3>
                    <p>
                      {{
                        destination.transportationInfo?.bus || "暂无大巴信息"
                      }}
                    </p>
                    <div class="transport-tips">
                      <div class="tip-item">
                        <el-icon><Timer /></el-icon>
                        <span>约12小时车程</span>
                      </div>
                      <div class="tip-item">
                        <el-icon><Tickets /></el-icon>
                        <span>提供上门接送</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 美食住宿 -->
            <section class="content-card food-accommodation-section">
              <div class="card-header">
                <h2>美食住宿</h2>
              </div>
              <div class="card-body">
                <!-- 美食推荐 -->
                <h3 class="sub-title">特色美食</h3>
                <div class="restaurants-grid">
                  <div
                    v-for="restaurant in destination.restaurants"
                    :key="restaurant.name"
                    class="restaurant-card"
                  >
                    <div class="restaurant-info">
                      <h4>{{ restaurant.name }}</h4>
                      <div class="restaurant-meta">
                        <span>{{ restaurant.cuisine }}</span>
                        <el-rate
                          v-model="restaurant.rating"
                          disabled
                          show-score
                        />
                      </div>
                    </div>
                    <div class="signature-dishes">
                      <h5>招牌菜品</h5>
                      <div class="dishes-tags">
                        <el-tag
                          v-for="dish in restaurant.signature"
                          :key="dish"
                          size="small"
                        >
                          {{ dish }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 住宿推荐 -->
                <h3 class="sub-title">住宿推荐</h3>
                <div class="hotels-grid">
                  <div
                    v-for="hotel in destination.accommodations"
                    :key="hotel.name"
                    class="hotel-card"
                  >
                    <div class="hotel-info">
                      <h4>{{ hotel.name }}</h4>
                      <div class="hotel-meta">
                        <span class="hotel-type">{{ hotel.type }}</span>
                        <el-rate v-model="hotel.rating" disabled show-score />
                      </div>
                      <div class="hotel-price">{{ hotel.price }}</div>
                    </div>
                    <div class="hotel-features">
                      <el-tag
                        v-for="feature in hotel.features"
                        :key="feature"
                        size="small"
                      >
                        {{ feature }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </el-col>

          <!-- 替换右侧边栏内容 -->
          <el-col :lg="8" :md="24">
            <div class="sidebar-wrapper">
              <!-- 天气信息卡片优化 -->
              <div class="info-card weather-card">
                <div class="card-header">
                  <h3>实时天气</h3>
                </div>
                <div class="card-body">
                  <div
                    v-if="destination.weatherInfo?.current"
                    class="weather-info"
                  >
                    <div class="current-weather">
                      <div class="weather-main">
                        <el-icon class="weather-icon" :size="48">
                          <component
                            :is="
                              getWeatherIcon(
                                destination.weatherInfo.current.weather
                              )
                            "
                          />
                        </el-icon>
                        <span class="weather-text">{{
                          destination.weatherInfo.current.weather
                        }}</span>
                      </div>
                      <div class="temp-info">
                        <span class="temperature"
                          >{{ destination.weatherInfo.current.temp }}°</span
                        >
                        <div class="temp-range">
                          <span
                            >{{ destination.weatherInfo.current.tempMin }}° ~
                          </span>
                          <span
                            >{{
                              destination.weatherInfo.current.tempMax
                            }}°</span
                          >
                        </div>
                      </div>
                    </div>
                    <div class="weather-details">
                      <div class="detail-item">
                        <el-icon><Umbrella /></el-icon>
                        <span
                          >湿度
                          {{ destination.weatherInfo.current.humidity }}%</span
                        >
                      </div>
                      <div class="detail-item">
                        <el-icon><Sunny /></el-icon>
                        <span
                          >紫外线
                          {{ destination.weatherInfo.current.uvIndex }}</span
                        >
                      </div>
                      <div class="detail-item">
                        <el-icon><Compass /></el-icon>
                        <span
                          >空气质量
                          {{ destination.weatherInfo.current.airQuality }}</span
                        >
                      </div>
                    </div>
                    <div class="weather-forecast">
                      <div
                        v-for="(day, index) in destination.weatherInfo.forecast"
                        :key="index"
                        class="forecast-item"
                      >
                        <span class="day">{{ day.date }}</span>
                        <el-icon class="weather-icon"
                          ><component :is="getWeatherIcon(day.weather)"
                        /></el-icon>
                        <span class="temp"
                          >{{ day.tempMin }}° ~ {{ day.tempMax }}°</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 新增相关路线卡片 -->
              <div class="info-card routes-card">
                <div class="card-header">
                  <h3>相关路线</h3>
                </div>
                <div class="card-body">
                  <div class="related-routes">
                    <div
                      v-for="route in relatedRoutes"
                      :key="route.id"
                      class="route-item"
                      @click="viewRoute(route.id)"
                    >
                      <div class="route-image">
                        <img
                          :src="getImageUrl(route.imageUrl)"
                          :alt="route.title"
                        />
                        <span class="duration">{{ route.duration }}天</span>
                      </div>
                      <div class="route-info">
                        <h4>{{ route.title }}</h4>
                        <div class="route-meta">
                          <span class="price">¥{{ route.price }}起</span>
                          <el-tag
                            size="small"
                            :style="getTagStyle(route.theme)"
                          >
                            {{ route.theme }}
                          </el-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 修改面包屑样式 */
.breadcrumb-nav {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 10;
}

.el-breadcrumb {
  --el-text-color-regular: rgba(255, 255, 255, 0.9);
  --el-text-color-primary: #fff;
  font-size: 0.95rem;
}

.hero-section {
  height: 100vh;
  min-height: 600px;
}

.cover-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  display: flex;
  align-items: flex-end;
}

.hero-content {
  padding: 80px 0;
  color: white;
}

.destination-info {
  max-width: 800px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.feature-badge {
  padding: 8px 20px;
  font-size: 1rem;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
}

h1 {
  font-size: 4rem;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.6rem;
  margin: 0 0 40px;
  max-width: 600px;
  line-height: 1.5;
  opacity: 0.9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.basic-stats {
  display: flex;
  align-items: center;
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 25px;
}

.stat-item .el-icon {
  font-size: 1.2rem;
}

.stat-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .hero-section {
    height: 70vh;
  }

  .hero-content {
    padding: 40px 0;
  }

  h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
  }

  .subtitle {
    font-size: 1.2rem;
    margin-bottom: 30px;
  }

  .basic-stats {
    flex-direction: column;
    gap: 15px;
  }

  .stat-divider {
    display: none;
  }

  .stat-item {
    width: 100%;
    justify-content: center;
  }
}

.main-content {
  padding: 40px 0;
  background: var(--light-bg);
}

.content-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.content-card:hover {
  transform: translateY(-5px);
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(to right, var(--primary-color), #36cfc9);
  color: white;
}

.card-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.card-body {
  padding: 25px;
}

.overview-text {
  color: var(--text-color);
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 25px;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.gallery-image {
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.05);
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  color: var(--text-color-secondary);
}

.highlights-grid {
  display: grid;
  gap: 20px;
}

.highlight-card {
  display: flex;
  gap: 20px;
  background: var(--light-bg);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.highlight-card:hover {
  transform: translateX(5px);
}

.highlight-image {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.highlight-image .el-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.highlight-card:hover .highlight-image .el-image {
  transform: scale(1.1);
}

.highlight-content {
  padding: 15px 20px;
  flex: 1;
}

.highlight-content h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--text-color);
}

.highlight-content p {
  margin: 0;
  color: var(--text-color-secondary);
  line-height: 1.6;
}

/* 侧边栏样式优化 */
.sidebar-wrapper {
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

.info-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.info-card .card-header {
  padding: 15px 20px;
}

.info-card .card-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.weather-info .current-weather {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.temp-info {
  display: flex;
  flex-direction: column;
}

.temperature {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 5px;
}

.weather {
  color: var(--text-color-secondary);
}

.weather-details {
  display: grid;
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-color);
}

detail-item:last-child {
  border-bottom: none;
}

.detail-item .label {
  color: var(--text-color-secondary);
}

.traffic-section {
  margin-bottom: 20px;
}

.traffic-section:last-child {
  margin-bottom: 0;
}

.traffic-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text-color);
}

.traffic-section p {
  color: var(--text-color-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .main-content {
    padding: 20px 0;
  }

  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .highlight-card {
    flex-direction: column;
  }

  .highlight-image {
    width: 100%;
    height: 200px;
  }

  .sidebar-wrapper {
    position: static;
  }
}

.hero-section {
  position: relative;
  height: 80vh;
  min-height: 600px;
}

.cover-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  display: flex;
  align-items: flex-end;
}

.cover-content {
  padding: 60px 0;
  color: white;
  max-width: 800px;
}

/* 内容卡片样式优化 */
.content-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .hero-section {
    height: 60vh;
    min-height: 400px;
  }

  .cover-content {
    padding: 40px 20px;
  }
}

/* 天气卡片样式优化 */
.weather-card .card-body {
  padding: 20px;
}

.current-weather {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.weather-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.weather-text {
  font-size: 1.1rem;
  color: var(--text-color);
}

.temp-info {
  text-align: right;
}

.temperature {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-color);
}

.temp-range {
  margin-top: 8px;
  color: var(--text-color-secondary);
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 15px 0;
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.weather-forecast {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.forecast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px;
  background: var(--light-bg);
  border-radius: 8px;
}

.forecast-item .day {
  font-size: 0.9rem;
  color: var(--text-color);
}

.forecast-item .temp {
  font-size: 0.85rem;
  color: var(--text-color-secondary);
}

/* 相关路线样式 */
.routes-card {
  margin-top: 20px;
}

.related-routes {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.route-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border-radius: 12px;
  background: var(--light-bg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.route-item:hover {
  transform: translateX(5px);
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.route-image {
  position: relative;
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.route-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.route-image .duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.8rem;
  border-radius: 4px;
}

.route-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.route-info h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.route-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #ff6b6b;
  font-weight: 500;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .route-image {
    width: 100px;
    height: 70px;
  }
}

/* 特色体验样式 */
.activity-card {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  transition: all 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-header h3 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--text-color);
}

.activity-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.activity-desc {
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* 摄影攻略样式 */
.photo-spots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.photo-spot-card {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.photo-spot-card:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.spot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.spot-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.spot-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color-secondary);
}

.spot-tips {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  color: var(--text-color);
  font-size: 0.95rem;
}

/* 交通攻略样式 */
.transport-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 10px;
}

.transport-card {
  background: var(--light-bg);
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.transport-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.transport-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  z-index: 1;
}

/* 为不同类型的交通方式设置不同的主题色 */
.transport-card.car .transport-icon {
  background: linear-gradient(135deg, #36cfc9, #13c2c2);
  color: white;
  box-shadow: 0 8px 16px rgba(19, 194, 194, 0.2);
}

.transport-card.plane .transport-icon {
  background: linear-gradient(135deg, #597ef7, #2f54eb);
  color: white;
  box-shadow: 0 8px 16px rgba(47, 84, 235, 0.2);
}

.transport-card.bus .transport-icon {
  background: linear-gradient(135deg, #ffa940, #fa8c16);
  color: white;
  box-shadow: 0 8px 16px rgba(250, 140, 22, 0.2);
}

.transport-card h3 {
  font-size: 1.2rem;
  margin: 0 0 15px;
  color: var(--text-color);
  font-weight: 600;
}

.transport-card p {
  color: var(--text-color-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  min-height: 48px;
}

.transport-tips {
  border-top: 1px dashed var(--border-color);
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.tip-item .el-icon {
  font-size: 16px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .transport-options {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .transport-card {
    padding: 20px;
  }

  .transport-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 15px;
  }
}

/* 美食住宿样式 */
.sub-title {
  font-size: 1.3rem;
  color: var(--text-color);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
}

.restaurants-grid,
.hotels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.restaurant-card,
.hotel-card {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.restaurant-card:hover,
.hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.restaurant-info h4,
.hotel-info h4 {
  margin: 0 0 10px;
  color: var(--text-color);
  font-size: 1.1rem;
}

.restaurant-meta,
.hotel-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.signature-dishes h5 {
  margin: 0 0 10px;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.dishes-tags,
.hotel-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hotel-price {
  color: #ff6b6b;
  font-weight: 500;
  margin: 10px 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .photo-spots,
  .transport-options,
  .restaurants-grid,
  .hotels-grid {
    grid-template-columns: 1fr;
  }

  .activity-card {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .breadcrumb-container {
    top: var(--header-height-mobile);
    padding: 12px 0;
  }
}

/* 移动端样式优化 */
@media (max-width: 768px) {
  /* 封面区域优化 */
  .hero-section {
    height: auto;
    min-height: 70vh;
  }

  .cover-image {
    background-attachment: scroll; /* 移动端禁用视差滚动 */
  }

  .hero-content {
    padding: 30px 0;
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .badges {
    gap: 8px;
    margin-bottom: 20px;
  }

  .feature-badge {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  /* 内容区域优化 */
  .main-content {
    padding: 20px 0;
  }

  .content-card {
    margin-bottom: 20px;
    border-radius: 12px;
  }

  .card-header {
    padding: 15px 20px;
  }

  .card-header h2 {
    font-size: 1.2rem;
  }

  .card-body {
    padding: 15px;
  }

  /* 网格布局优化 */
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .photo-spots {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .transport-options {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .restaurants-grid,
  .hotels-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
  }

  /* 卡片内容优化 */
  .highlight-card {
    flex-direction: column;
  }

  .highlight-image {
    width: 100%;
    height: 180px;
  }

  .highlight-content {
    padding: 12px 15px;
  }

  .highlight-content h3 {
    font-size: 1.1rem;
  }

  /* 活动卡片优化 */
  .activity-card {
    padding: 15px;
    margin-bottom: 15px;
  }

  .activity-header h3 {
    font-size: 1rem;
  }

  /* 侧边栏优化 */
  .sidebar-wrapper {
    margin-top: 20px;
  }

  .info-card {
    border-radius: 12px;
    margin-bottom: 15px;
  }

  .weather-details {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .weather-forecast {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .forecast-item {
    padding: 8px;
  }

  /* 路线卡片优化 */
  .route-item {
    padding: 12px;
  }

  .route-image {
    width: 80px;
    height: 60px;
  }

  .route-info h4 {
    font-size: 0.95rem;
  }

  /* 交通卡片优化 */
  .transport-card {
    padding: 15px;
  }

  .transport-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
    margin-bottom: 12px;
  }

  .transport-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  /* 美食住宿卡片优化 */
  .restaurant-card,
  .hotel-card {
    padding: 15px;
  }

  .restaurant-info h4,
  .hotel-info h4 {
    font-size: 1rem;
  }

  .signature-dishes h5 {
    font-size: 0.85rem;
  }

  .hotel-price {
    font-size: 0.9rem;
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .hero-section {
    min-height: 60vh;
  }

  h1 {
    font-size: 1.8rem;
  }

  .badges {
    flex-wrap: wrap;
  }

  .feature-badge {
    padding: 4px 10px;
    font-size: 0.85rem;
  }

  .image-gallery {
    grid-template-columns: 1fr;
  }

  .weather-forecast {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 移动端封面样式优化 */
@media (max-width: 768px) {
  .hero-section {
    height: auto;
    min-height: 80vh;
  }

  .cover-image {
    height: 100%;
    min-height: 80vh;
    background-attachment: scroll;
    background-position: center;
  }

  .hero-content {
    padding: 120px 0 40px;
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.5;
  }

  .badges {
    gap: 8px;
    margin-bottom: 20px;
  }

  .feature-badge {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .destination-info {
    padding: 0 15px;
  }

  .basic-stats {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .stat-item {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 8px 15px;
  }

  .stat-divider {
    display: none;
  }
}
</style>
